
<script lang="ts" setup>
import { onMounted, reactive, ref } from "vue";
import { Search, Close } from "@element-plus/icons-vue";
import { filterDate } from '@/utils/format'
import { fetchDeleteSuggestion, fetchGetSuggestionList } from "@/api/message";
import { ElTable } from 'element-plus'

const typeOptions = [
  {
    value: 0,
    label: '活动相关',
  },
  {
    value: 1,
    label: '人员相关',
  },
  {
    value: 2,
    label: '物资相关',
  },
  {
    value: 3,
    label: '规则相关',
  },
  {
    value: 4,
    label: '其他',
  },
]

const filterType = (val: any) => {
  let typeStr = ''
  typeOptions.forEach(item => {
    if (item.value == val) {
      typeStr = item.label
    }
  })
  return typeStr
}

// 表单数据
let tableData = reactive([])
// 实际传递的条件
const listQuery = reactive({
  currentPage: 1,
  type: undefined, // 名称
  title: undefined, // 类型
  pageSize: 10,
})
// 显示在界面上的查询条件
const showQuery = reactive({
  currentPage: 1,
  type: undefined, // 名称
  title: undefined, // 类型
})
const total = ref<number>(0)// 列表总数
// 查询
const handleSearch = () => {
  getPageList()
}

const tableLoading = ref(false)
// 获取列表
const getPageList = async () => {
  tableLoading.value = true
  listQuery.type = showQuery.type
  listQuery.title = showQuery.title
  const res = await fetchGetSuggestionList(listQuery)
  const { currentPage, data } = res.data
  listQuery.currentPage = showQuery.currentPage = currentPage
  total.value = res.data.total
  tableData = data
  tableLoading.value = false
}
onMounted(() => {
  getPageList()
})

interface User {
  [x: string]: any;
  date: string
  name: string
  address: string
}
const multipleSelection = ref<User[]>([])
let suggestionList: any[] = []
const handleSelectionChange = (val: User[]) => {
  multipleSelection.value = val
  suggestionList = []
  val.forEach(item => {
    suggestionList.push(item.id)
  })
}
const multipleTableRef = ref<InstanceType<typeof ElTable>>()

/**
 * 点击删除按钮
 */
const handleDelete = (isList: boolean, row?: any,) => {
  if (isList) {
    if (suggestionList.length == 0) {
      ElMessage({
        message: '请先进行勾选',
        type: 'warning'
      })
    } else {
      suggestionList = []
      multipleSelection.value.forEach(item => {
        suggestionList.push(item.id)
      })
      console.log(suggestionList)
      fetchDeleteSuggestion({ suggestionList: suggestionList }).then((res: any) => {
        if (res) {
          ElMessage({
            message: '操作成功',
            type: 'success'
          })
          getPageList()
        }
      })

    }
  } else {
    fetchDeleteSuggestion({ suggestionList: [row.id] }).then((res: any) => {
      if (res) {
        ElMessage({
          message: '操作成功',
          type: 'success'
        })
        getPageList()
      }
    })
  }

}
</script>

<template>
  <div class="notification-content container">
    <div class="header flex flex-center">
      <div>
        <el-select v-model="showQuery.type" class="m-2" placeholder="留言类型" clearable>
          <el-option v-for="item in typeOptions" :key="item.value" :label="item.label" :value="item.value" />
        </el-select>
        <el-input v-model="showQuery.title" placeholder="根据标题查询" clearable />
        <el-button type="primary" @click="handleSearch" :icon="Search" class="btn-green">
          查询
        </el-button>
        <el-button type="primary" @click="handleDelete(true)" :icon="Close" class="btn-red">
          批量删除
        </el-button>
      </div>
    </div>

    <el-table :data="tableData" stripe v-loading="tableLoading" @selection-change="handleSelectionChange"
      ref="multipleTableRef">
      <el-table-column type="selection" width="55" />
      <el-table-column prop="stuCode" label="留言人学号">
        <template #default="scope">
          <div class="flex flex-center">
            <div v-if="scope.row.anonymous == 0">{{ scope.row.stuCode }}</div>
            <div class="student-button" v-else>匿名</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="name" label="留言人姓名">
        <template #default="scope">
          <div class="flex flex-center">
            <div v-if="scope.row.anonymous == 0">{{ scope.row.name }}</div>
            <div class="student-button" v-else>匿名</div>
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="type" label="留言类型">
        <template #default="scope">
          <div>
            {{ filterType(scope.row.type) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="title" label="留言标题" show-overflow-tooltip />
      <el-table-column prop="content" label="留言内容" show-overflow-tooltip min-width="200" />
      <el-table-column prop="createdAt" label="留言时间">
        <template #default="scope">
          <div>
            {{ filterDate(scope.row.createdAt) }}
          </div>
        </template>
      </el-table-column>
      <el-table-column prop="price" label="操作">
        <template #default="scope">
          <div class="theme-success">
            <el-button type="primary" class="btn-red" @click="handleDelete(false, scope.row)">删除</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <Pagination :total="total" v-model:page="listQuery.currentPage" v-model:limit="listQuery.pageSize" hide-on-single-page
      @pagination="getPageList" />
  </div>
</template>

<style lang="scss">
.notification-content {
  width: 100%;
  min-height: 45rem;
  display: grid;
  grid-template-rows: 8rem auto;
  gap: 2rem;
  background-color: #fff;

  .header {
    border: 1px solid #eee;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
    padding: 0 2rem;

    .el-input,
    .el-select {
      margin-right: 20px;
      width: 22rem;
    }
  }

  .student-button {
    border: 1px solid #DAECFE;
    color: #409EFF;
    background-color: #ECF5FF;
    // width: 5.5rem;
    padding: 0 0.8rem;
    height: 3rem;
    line-height: 3rem;
    text-align: center;
    border-radius: 0.5rem;
  }
}
</style>

